// 审核计划表
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="年份">
                <el-date-picker type="year" v-model="queryParams.auditYear" format="yyyy" value-format="yyyy"
                    :style="{ width: '100%' }" placeholder="请选择年份" clearable></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['manageAudit:recordDrill:add']">新增</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['manageAudit:recordDrill:export']">导出</el-button>
            </el-col> -->
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="printBox"
                    v-hasPermi="['manageAudit:recordDrill:print']">打印</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table @selection-change="handleSelectionChange" fit v-loading="loading" border :data="dataList">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column show-overflow-tooltip label="演练时间" prop="planTime" min-width="120" />
            <el-table-column show-overflow-tooltip label="演练预案" prop="reservePlan" min-width="120" />
            <el-table-column show-overflow-tooltip label="演练地点" min-width="150" prop="place" />

            <el-table-column show-overflow-tooltip label="演练负责人" min-width="120" prop="leaderName" />
            <el-table-column show-overflow-tooltip label="参加人员" min-width="120" prop="joinUserName" />
            <el-table-column show-overflow-tooltip label="所用物资材料情况" min-width="120" prop="useMaterial" />
            <el-table-column show-overflow-tooltip label="演练内容" min-width="120" prop="drillContent" />
            <el-table-column show-overflow-tooltip label="日期" min-width="120" prop="recordTime" />
            <el-table-column show-overflow-tooltip label="记录人" min-width="120" prop="createByName" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['manageAudit:recordDrill:info']"
                        @click="handleDetail(scope.row)">详情</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['manageAudit:recordDrill:info']"
                        @click="handleDelete(scope.row)">删除</el-button>

                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['manageAudit:recordDrill:edit']">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 打印模板位置 -->
        <PrintBox :checkNum="9" :printRow="printList"  id="printBox">
            <template slot="title" slot-scope="scope">
                <div style="margin-bottom: 20px">应急预案演练记录 STET/B/16-4</div>
            </template>
            <template slot-scope="scope">
                <!-- 表格  class  table-page  必须-->
                <table style="border-collapse: collapse; table-layout: fixed" border="1" cellspacing="0" class="table-page">
                    <tr>
                        <td style="width:30mm">演练时间</td>
                        <td style="width:80mm">
                            {{ scope.item.planTime }}
                        </td>
                        <td style="width:30mm">演练预案</td>
                        <td style="width: 75mm;">
                            {{ scope.item.reservePlan }}
                        </td>
                    </tr>
                    <tr>
                        <td>演练地点</td>
                        <td>
                            {{ scope.item.place }}
                        </td>
                        <td>演练负责人</td>
                        <td>
                            {{ scope.item.leaderName }}
                        </td>
                    </tr>
                    <tr style="height:20mm">
                        <td>参加人员</td>
                        <td colspan="3" style="text-align: left;">
                            {{ scope.item.joinUserName }}
                        </td>
                    </tr>
                    <tr style="height:80mm">
                        <td>所用物资材料情况</td>
                        <td colspan="3" style="text-align: left;">
                            {{ scope.item.useMaterial }}
                        </td>
                    </tr>
                    <tr style="height:80mm">
                        <td style="width:30mm">演练内容</td>
                        <td colspan="3" style="text-align: left;">
                            {{ scope.item.drillContent }}
                        </td>
                    </tr>
                </table>
                <!-- 底部信息位置 -->
                <div class="desc" style="display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 25px;
            }">
                    <div style="position: relative">
                        记录人：<img style="width: 80px; " :src="baseUrl + scope.item.esign" />
                    </div>

                    <div>日期：{{ scope.item.recordTime }}</div>
                </div>
                <div class="page-bottom" style="page-break-after: always">
                    <div class="desc">注：请附有关影像资料。</div>
                    <div class="desc" style="font-size:8px;color:#999">注：本表格自2023年12月1日起生效。</div>
                </div>
                
            </template>
        </PrintBox>
    </div>
</template>

<script>
import printStyle from "@/utils/print.js";

import {
    listSafeAccidentDrillItemRecord,
    delSafeAccidentDrillItemRecord,
} from "@/api/secure/recordDrill.js";
export default {
    name: "listmanagerAudit",
    data() {
        return {
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            dataList: [],
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            baseUrl: this.$VUE_APP_IMG_API,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                auditYear: undefined,
            },
            // 日期范围
            dateRange: [],
            openFile: false,
            type: 1,
            current: {},
            formData: { filePath: undefined },
            infos: [], //勾选的数据
            printList: [
            ],
            printList1: []

        };
    },
    created() {
        const str = sessionStorage.getItem('queryParams');
        console.log(JSON.parse(str));
        if (str) {
            this.queryParams = JSON.parse(str);
            setTimeout(() => {
                sessionStorage.removeItem('queryParams');
            }, 500)
        }
        this.getList();
    },
    methods: {
        printBox() {
            //infos  勾选的数据 如果有勾选就打印勾选。
            if (this.infos.length) {
                this.printList = this.infos;
            } else {
                //反之打印当前整个列表
                this.printList = this.dataList;
            }
            setTimeout(() => {
                document.title = "年度管理评审工作计划 STET/B/13-1";
                this.$print({
                    printable: "printBox", //打印区域id
                    type: "html", //打印类型是html
                    scanStyles: false,
                    targetStyles: ["*"],
                    style: this.workStyle(),
                    onPrintDialogClose: () => {
                        document.title = process.env.VUE_APP_TITLE;
                    },
                });
            }, 500);
        },
        // 可以自定义样式  printStyle 是公共样式 切勿私自修改
        workStyle() {
            return `${printStyle}
        table,
        table tr th,
        table tr td {
          height:20mm;
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
        },
        handleFile(row, type, isEdit = false) {
            try {
                this.formData = { filePath: undefined };
                this.type = type;
                this.current = row;
                this.isEdit = false;
                if (this.type == 1 && this.current.firstSignFile) {
                    this.formData.filePath = this.current.firstSignFile;
                    this.isEdit = true;
                }
                if (this.type == 2 && this.current.endSignFile) {
                    this.formData.filePath = this.current.endSignFile;
                    this.isEdit = true;
                }
                if (this.type == 3 && this.current.report) {
                    this.formData.filePath = this.current.report;
                    this.isEdit = true;
                }
                if (isEdit) this.isEdit = false
            } catch (error) {
                console.log(error);
            }
            this.openFile = true;
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.safeAccidentDrillItemRecordId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
            this.infos = selection;

        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            const configId = row.safeAccidentDrillItemRecordId || this.ids;
            this.$router.push("./recordDrillAdd?isEdit=true&id=" + configId);
        },
        handleDetail(row) {
            // sessionStorage.setItem('queryParams', JSON.stringify(this.queryParams));

            this.$router.push(
                "./recordDrillAdd?isInfo=true&id=" + row.safeAccidentDrillItemRecordId
            );
            // this.$router.push({
            //     path: "/manageAudit/process/detail/" + row.piid,
            //     query: {
            //         definitionId: null,
            //         deployId: null,
            //         taskId: null,
            //         finished: false,
            //         id: row.safeAccidentDrillItemRecordId,
            //     },
            // });
            // this.$router.push("./addBuy?isInfo=true&id=" + row.deviceBuyId);
        },
        // 更多操作触发
        handleCommand(command, row) {

            switch (command) {
                case "handleDelete":
                    this.handleDelete(row);
                    break;
                case "handleFileFirst":
                    this.handleFile(row, 1);
                    break;
                case "handleFileLast":
                    this.handleFile(row, 2);
                    break;
                case "handleSummary":
                    this.handleFile(row, 3);
                    break;
                case "handleCorrent":
                    this.handleCorrent(row);
                    break;
                case "addLogConent":
                    this.addLogConent(row);
                    break;
            }
        },
        addLogConent(row) {
            sessionStorage.setItem('queryParams', JSON.stringify(this.queryParams));

            this.$router.push("./addInAudit?planId=" + row.safeAccidentDrillItemRecordId);
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const configId = row.safeAccidentDrillItemRecordId || this.ids;
            let name = this.checkRow(
                configId,
                this.dataList,
                "safeAccidentDrillItemRecordId",
                "DELETE",
                "year"
            );
            this.$modal
                .confirm('是否确认删除id为"' + configId + '"的数据项？')
                .then(function () {
                    return delSafeAccidentDrillItemRecord(configId);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        handleAdd() {
            this.$router.push("./recordDrillAdd");
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listSafeAccidentDrillItemRecord(
                this.addDateRangeTime(
                    this.queryParams,
                    this.dateRange,
                    "startAuditDate",
                    "endAuditDate"
                )
            ).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleExport() {
            this.download(

                "system/managerAudit/export",
                {
                    ...this.queryParams,
                },
                `管理审核计划记录表_${this.parseTime(
                    new Date().getTime(),
                    "{y}-{m}-{d}"
                )}.xlsx`
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    img {
        width: 100%;
    }
}
</style>
